<template>
    <div class="map-view">
        <!-- 地图概览 -->
        <div id="main"></div>
    </div>
  </template>
  
  <script setup>
import { onMounted,getCurrentInstance } from "vue";
//引入地图相关数据
import 'echarts/map/js/china'//中国地图需要引入china
import {China} from '@/api/api'
//全局使用echarts
let {proxy}=getCurrentInstance()
const echarts=proxy.$echarts
onMounted(()=>{

    //获取地图信息
    China().then((res)=>{
        console.log('获取的中国地图',res.data.data)
        let  data=res.data.data//series里面的data
        //1.通过 echarts.init 方法初始化一个 echarts 实例
        var myChart = echarts.init(document.getElementById('main'));
        //2.指定图表的配置项和数据
        var option = {
            title:{//标题组件，包含主标题和副标题。
                text:'学生就业分布'
                },
            tooltip: { //悬浮弹框
                triggerOn: 'click', //提示框触发的条件
                enterable: true,//鼠标是否可进入提示框浮层中，默认为false
                //1.函数回调
                formatter(item) {//item=下面series里面的data里面的每一项 //[{}]  data={ a:'', b:'', c:'', d:''} 
                    // return item.name
                    return '<a href="#/city/'+item.name+'" style="color:#fff">省份：'+item.name+'，就业人数：'+(item.value?item.value:0)+'</a>'
                }
                //2.字符串格式
                // formatter:'{a}-{b}-{c}'//中国-青海-1
            },
            visualMap: [{//visualMap 是视觉映射组件，用于进行『视觉编码 visualMap：图注样式定制，其中包括color范围，文字提示
                orient: "horizontal", //如何放置 visualMap 组件，水平（'horizontal'）或者竖直（'vertical'）。
                type: "piecewise", //分段型视觉映射组件 type: "continuous" 连续型视觉映射组件
                bottom: 0,//visualMap 组件离容器下侧的距离。
                textGap: 5,//两端文字主体之间的距离，单位为px
                itemGap: 10,//visualMap 组件主体之间的距离
                itemWidth: 10, //visualMap 组件的宽
                itemHeight: 10,//visualMap 组件的高
                padding: 2,//visualMap-continuous内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
                textStyle: {//visualMap 文字的样式
                    fontSize: 9,//visualMap 文字的字体大小。
                },
                pieces: [ // 配置颜色区间
                    {
                        min: 0,
                        max: 0,
                        color: "#FFFFFF"
                    },
                    {
                        min: 1,
                        max: 2,
                        color: "#FAEBD2"
                    },
                    {
                        min: 3,
                        max: 4,
                        color: "#E9A188"
                    },
                    {
                        min: 5,
                        max: 6,
                        color: "#D56355"
                    },
                    {
                        min: 7,
                        max: 8,
                        color: "#BB3937"
                    },
                    {
                        min: 9,
                        max: 30,
                        color: "#772526"
                    }
                ]
            }],
            series: [{
                name: "中国",//系列名称，用于tooltip的显示
                type: "map", //地图  bar  line  map 
                map: "china", //中国地图 需要引入地图china.js 
                roam: true,//是否开启鼠标缩放和平移漫游。默认不开启。
                zoom: 1.2,//当前视角的缩放比例。
                aspectScale: 0.75,//这个参数用于 scale 地图的长宽比，如果设置了projection则无效。
                top: 40,//组件离容器上侧的距离。
                layoutCenter: ['5%', '5%'],//定义地图中心在屏幕中的位置
                label: {//图形上的文本标签
                    normal: {
                        show: true,//是否显示标签。
                        textStyle: {// 文本标签文字的样式
                            fontSize: 8//文字的字体大小
                        }
                    }
                },
                itemStyle: {//地图区域的多边形 图形样式。
                    normal: {
                        areaColor: 'rgba(0,255,236,0)',
                        borderColor: 'rgba(0,0,0,0.2)',
                    },
                    emphasis: { // 选中的区域颜色及阴影效果等
                        areaColor: 'rgba(255,180,0,0.8)',//地图区域的颜色。
                        shadowOffsetX: 0,//阴影水平方向上的偏移距离。
                        shadowOffsetY: 0,//阴影垂直方向上的偏移距离。
                        shadowBlur: 20,//图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                        borderWidth: 0,//描边线宽。为 0 时无描边。
                    }
                },
                data
                // data: [//地图系列中的数据内容数组
                //    //name--数据所对应的地图区域的名称，例如 '广东'，'浙江'。
                //    //value--该区域的数据值。
                //     { name: '内蒙古', value: 3 },
                //     { name: '北京', value:50 },
                //     { name: '天津', value: 80 },
                //     { name: '上海', value: 100 },
                //     { name: '杭州', value: 80 },
                //     { name: '湖北', value: 33 },
                //     { name: '深圳', value: 20 },
                //     { name: '安徽', value: 10 },
                //     { name: '四川', value: 43 },
                //     { name: '广东', value: 8 },
                //     { name: '山西', value: 10 },
                //     { name: '山东', value: 33 },
                //     { name: '辽宁', value: 12 },
                //     { name: '黑龙江', value:5 },
                //     { name: '河北', value: 25 },
                //     { name: '甘肃', value: 8 },
                //     { name: '陕西', value: 20 },
                //     { name: '湖南', value: 35 },
                //     { name: '河南', value: 15 },
                //     { name: '西藏', value: 2 },
                //     { name: '新疆', value: 1 },
                //     { name: '浙江', value: 30 },
                //     { name: '江西', value: 5 },
                //     { name: '贵州', value: 1 },
                //     { name: '云南', value: 3 },
                // ]
            }]
        }
        //3. 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        })
    
})

  </script>
  
  <style lang="less" scoped>
  .map-view{
    width:100%;
    #main{
      width:100%;
      height:540px;
    }
  }
  </style>